<template>
  <div class="breadcrumb">
    <Breadcrumb :aaa="aaa" :msgg="msg" :txt="txt" :path1="path1" />
  </div>
  <!-- 4 zeh退货原因设置 -->
  <div class="con_container">
    <el-card class="box-card">
      <div style="display: flex; justify-content: space-between">
        <div style="margin-top: 5px">数据列表</div>
        <div><el-button type="primary" @click="onAddUser">添加</el-button></div>
      </div>
    </el-card>
    <div>
      <el-table
        border
        header-align="center"
        @selection-change="handleSelectionChange"
        :data="tableData"
        ref="multipleTableRef"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column
          :value="ishow"
          type="selection"
          prop="ischeck"
          width="55"
          align="center"
        />
        <el-table-column prop="id" label="编号" width="120" align="center" />
        <el-table-column
          prop="name"
          label="原因类型"
          width="489"
          align="center"
        />
        <el-table-column
          property="address"
          prop="sort"
          label="排序"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column label="是否启用" width="489" align="center">
          <template #default="scope">
            <el-switch
              @change="statuszhuangtai(scope.row)"
              prop="status"
              :value="scope.row.status === 1 ? true : false"
            />
          </template>
        </el-table-column>
        <el-table-column label="添加时间" width="180" align="center">
          <!-- slot 插槽写法  scope就是作用域插槽 ， scope.row 就是数据 -->
          <template #default="scope">
            <div>
              {{
                scope.row.createTime
                  ? dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
                  : "/"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" flex="right">
          <template #default="scope">
            <el-button @click="del(scope.row)">删除</el-button>
            <el-button @click="onEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      style="display: flex; justify-content: space-between; margin-top: 20px"
    >
      <div>
        <el-form-item>
          <el-select
            v-model="value2"
            class="m-2"
            placeholder="全部"
            size="large"
          >
            <el-option value="批量删除"></el-option>
          </el-select>
          <el-button type="primary" @click="queding">确定</el-button>
        </el-form-item>
      </div>
      <div>
        <el-pagination
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          background
          :page-sizes="[1, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <module
      :visible="visible"
      :form="modalForm"
      @cancel="onCloseDialog"
      @confirm="onConfirmDialog"
    ></module>
  </div>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import * as reason from "../../request/api";
import { ref, reactive } from "vue";
import type { Ref } from "vue";
import useTable from "../../hooks/useTables";
import type { returnReasonlist } from "../../request/OmsOrderReturnReasonController/index";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import module from "../../components/returnReason/motaikuang.vue";
import Breadcrumb from "../../components/breadcrumb.vue";
let msg = ref("退货原因设置");
let txt = ref("订单");
let path1 = ref("oms/order");
let aaa = ref(0);
let router = useRouter();

let piliang = ref("批量删除");
let ishow = ref(false);
interface User {
  date: string;
  name: string;
  address: string;
}
const multipleSelection = ref<User[]>([]);
let value2 = ref("");
// 新增
let add = false; // false编辑 true 新增
// 模态框
let modalForm = ref({}) as Ref<returnReasonlist>;
let {
  tableData,
  getTableData,
  pagination,
  handleSizeChange,
  handleCurrentChange,
} = useTable(reason.reason.getreturnReasonlist);

tableData.value.forEach((item) => {
  item.ischeck = true;
});

let onEdit = (row: returnReasonlist) => {
  add = false;
  modalForm.value = row;
  console.log(row);

  visible.value = true;
};
//删除
let del = (row: returnReasonlist) => {
  ElMessageBox.confirm("你确定删除吗?", "提示", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(async () => {
      await reason.reason.getreturnReasonlistdel(row.id);
      router.go(0);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

// 添加用户
let onAddUser = () => {
  let newUser = {
    name: "",
    sort: 0,
    status: 0,
  } as returnReasonlist;
  modalForm.value = newUser;
  add = true;
  visible.value = true;
};
//模态框
let visible = ref(false);
let onCloseDialog = () => {
  visible.value = false;
};
// 确认了输入框的内容之后
// 需要发送请求
let onConfirmDialog = (row: any) => {
  console.log(row); // row就是表单数据
  // 二次 确认
  ElMessageBox.confirm("是否确认提交!", "提示", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(async () => {
      // 发请求
      row.status = +row.status;
      // console.log(+row.status);

      if (add) {
        await reason.reason.getreturnReasonlistadd(row); // 新增
        router.go(0);
      } else {
        await reason.reason.getreturnReasonlistUpdate(row); // 编辑
        // router.go(0)
      }
      visible.value = false;
      ElMessage({
        type: "success",
        message: "操作成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消提交",
      });
      visible.value = false;
    });
};
//批量删除
let ids = ref([]);
const handleSelectionChange = (val: any) => {
  let a = val.map((item: any) => {
    return item.id;
  });
  ids.value = a;
  console.log(ids.value);
};

let queding = () => {
  ids.value.forEach(async (item) => {
    await reason.reason.getreturnReasonlistdel(item);
    ElMessage({
      message: "批量删除成功",
      type: "success",
    });
  });

  getTableData();
};

//修改状态
let statuszhuangtai = async (row: returnReasonlist) => {
  if (row.status === 0) {
    row.status = 1;
    await reason.reason.getreturnReasonlistUpdatestatus(row);
    ElMessage({
      message: "状态修改完成",
      type: "success",
    });
  } else {
    row.status = 0;
    await reason.reason.getreturnReasonlistUpdatestatus(row);
    ElMessage({
      message: "状态修改完成",
      type: "success",
    });
  }
};
getTableData();
</script>

<style scoped>
.breadcrumb {
  height: 45px;
  border-bottom: 1px solid #ebeef5;
  font-size: 20px;
}

.con_container {
  padding: 10px 20px !important;
  margin-top: 20px;
}
</style>
